<template>
  <div class="container">
    <el-card shadow="always">
      <el-row :gutter="20">
        <el-col :span="6"
          ><el-input
            maxlength="50"
            v-model="query.nameormobile"
            placeholder="请输入人员姓名/手机号"
            clearable
          ></el-input
        ></el-col>
        <el-col :span="4">
          <el-select
            v-model="query.position"
            placeholder="请选择职位状态"
            :clearable="false"
          >
            <el-option
              v-for="item in [
                {
                  text: '入职职位',
                  value: '-1',
                },
                {
                  text: '全职',
                  value: '1',
                },
                {
                  text: '兼职',
                  value: '2',
                },
              ]"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="query.page=1;getList()">搜索</el-button>
        </el-col>
      </el-row>
      <rz-height></rz-height>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="信息码状态" width="100">
          <template slot-scope="scope">
            <div>
              <div v-if="scope.row.codecolor == 0">
                   待完善
              </div>
              <div v-else-if="scope.row.codecolor == 1" class="green">
              绿码
              </div>
              <div v-else-if="scope.row.codecolor == 2" class="yellow">
              黄码
              </div>
              <div v-else-if="scope.row.codecolor == 3" class="red">
               红码
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名"> 


<template slot-scope="scope">
            <div>
           {{scope.row.name||scope.row.loginname}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" width="100"> 
<template slot-scope="scope">
            <div>
           {{scope.row.mobile|filterTel}}
            </div>
          </template>

              
        </el-table-column>
                <el-table-column prop="mobile" label="角色" width="100"> 
<template slot-scope="scope">
            <!-- <div>
           {{scope.row.isadmin==1?'食安管理员':"从业人员"}}
            </div> -->
            <!-- <template slot-scope="scope"> -->
              <div v-if="scope.row.isadmin == 1">
               食品安全员
              </div>
              <div v-else-if="scope.row.isadmin == 2">
              行政管理员
              </div>
              <div v-else-if="scope.row.isadmin == 3">
              企业负责人
              </div>
              <div v-else-if="scope.row.isadmin == 4">
              食品安全总监
              </div>
              <div v-else>
              从业人员
              </div>
            <!-- </template> -->
          </template>

              
        </el-table-column>
        <el-table-column label="职位状态" width="100">
          <template slot-scope="scope">
            <div>
              <div v-if="scope.row.position == 1">在职[全职]</div>
              <div v-else>在职[兼职]</div>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="mobile" label="在职日期" width="150">
          <template slot-scope="scope">
            <div>{{ scope.row.entrytime }}--至今</div>
          </template>
        </el-table-column>
        <el-table-column prop="createdate" label="纳入日期" width="150">
        </el-table-column>
        <el-table-column prop="mobile" label="健康证有效期至" width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.validitycate">
              {{ scope.row.validitycate=='2111-01-01'? "--": scope.row.validitycate||"--"  }}
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="考试结果" width="160">
          <template slot-scope="scope">
            <div v-if="scope.row.tpiFinishTime">
              {{scope.row.tpiFinishTime=='2111-01-01'?'长期有效':scope.row.tpiFinishTime }}
              <span class="red" v-if="scope.row.tpiReplyResultStr=='不及格'">
                  ({{scope.row.tpiReplyResultStr}})
              </span>
              <span class="green" v-else>
              ({{scope.row.tpiReplyResultStr}})

              </span>
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button size="small" type="primary" @click="viewMenu(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        @pagination="getList"
        :page.sync="query.page"
      />
    </el-card>
    <rz-dialog
      :dialogVisible.sync="dialogVisible"
      :isShowConfirm="false"
      title="查看人员详情"
    >
      <el-form label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名"> {{ data.thename }} </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号">{{ data.mobile|filterTel }}</el-form-item>
          </el-col>
        </el-row>

<el-row>
          <el-col :span="12">
            <el-form-item label="角色"> 
              <!-- {{ data.isadmin==1?'食安管理员':"从业人员" }}  -->

                <!-- <template slot-scope="scope"> -->
              <div v-if="data.isadmin == 1">
               食品安全员
              </div>
              <div v-else-if="data.isadmin == 2">
              行政管理员
              </div>
                <div v-else-if="data.isadmin == 3">
              企业负责人
              </div>
              <div v-else-if="data.isadmin == 4">
              食品安全总监
              </div>
              <div v-else>
              从业人员
              </div>
            <!-- </template> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纳入日期">{{ data.entrytime }}</el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="证件类型"> {{data.documentTypeStr}}</el-form-item>
          </el-col>
          <el-col :span="12">
                  <el-form-item label="身份证号码">{{ data.dabh|filterID }}</el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="入职职位"
              >{{ data.status }}[{{ data.position }}]</el-form-item
            >
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属分组">{{
              data.grouping || "--"
            }}</el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="健康证有效期至">{{
              data.validitycate=='2111-01-01'? "--": data.validitycate||"--"
            }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检测机构">{{
              data.validitycate=='2111-01-01'? "--":  data.institutions||"--"
            }}</el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="考试日期">{{
              data.tpi_create_time || "--"
            }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="考试结果">
              <div v-if="data.tpi_create_time">
                {{ data.tpi_reply_result==1?'及格':'不及格' }}
              </div>
              <div v-else>--</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </rz-dialog>
  </div>
</template>
<script>
import {
  findCompanyPersonnelInfolist,
  queryPeopleInfo,
} from "@/api/modules/enterprise";
export default {
  // props:[],
  // 页面加载
  created() {
    this.getList();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      query: {
        isPage: 0,
        page: 1,
        pageSize: 10,
        fsuperviseunitid: sessionStorage.getItem("interpretation"),
        grouping: "",
        isadmin: "-1",
        nameormobile: "",
        position: "-1",
        status: "1",
      },
      tableData: [],
      total: 0,
      dialogVisible: false,
      data: {},
    };
  },
  // 方法
  methods: {
    getList() {
      findCompanyPersonnelInfolist(this.query).then((res) => {
        this.tableData = res.data;
        this.total = res.totalCount;
      });
    },
    viewMenu(e) {
      queryPeopleInfo({ id: e.id }).then((res) => {
        res.data.isadmin=e.isadmin
        this.data = res.data;
        this.dialogVisible = true;
      });
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {},
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
.icon-erweima {
  font-size: 40px;
}
</style>
